<template>
    <div class="myorder">
        <div class="header">
            <back :title="title"></back>
        </div>
        <div class="order" v-if="data.length > 1" ref="wrapper">
            <div class="order-container">
                <div
                    class="order-list"
                    v-for="(item, index) in data"
                    :key="index"
                >
                    <div class="order-item" @click="openOrderInfo(item.buyerOpenid,item.orderId)">
                        <div class="order-item-table">
                            {{ item.buyerAddress }}
                            <span>订单编号{{ item.orderId }}</span>
                        </div>
                        <!-- <div class="order-item-food">
                            <p
                                class="order-item-food-item"
                                v-for="(item, index) in data"
                                :key="index"
                            >
                                {{ item.name }}
                            </p>
                        </div> -->
                        <div class="order-item-info">
                            <div class="order-item-info-count">
                                {{ item.createTime }}
                            </div>
                            <div class="order-item-info-count">
                                合计<span>￥{{ item.orderAmount }}</span>
                            </div>
                        </div>
                        <div class="payStatus" v-show="item.payStatus == 0">
                            未支付
                        </div>
                        <div
                            class="payStatus success"
                            v-show="item.payStatus == 1"
                        >
                            已支付
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <van-empty description="没有订单信息" v-if="data.length == 0" />
    </div>
</template>
<script>
import back from "../components/Back.vue";
import http from "../api/http";
import moment from "moment";
import BScroll from "better-scroll";
export default {
    data() {
        return {
            title: "我的订单",
            total: "",
            totalPrice: "",
            data: [],
            openid: "ew3euwhd7sjw9diwkq",
            page: 0, //从第0页开始
            size: 10,
            listBScroll: "",
        };
    },
    components: {
        back,
    },
    methods: {
        openOrderInfo(openid,orderId) {
            console.log(openid,orderId);
            let data = {
                openid:openid,
                orderId:orderId
            }
            this.$router.push({
                name:"OrderInfo",
                params: data,
            });
        },
        getList() {
            this.page += 1;
            let data = {
                openid: this.openid,
                page: this.page,
                size: this.size,
            };
            http.get("/tophappiness/sell/buyer/order/list", data).then(
                (res) => {
                    res.data.forEach((item) => {
                        item.createTime = moment(item.createTime * 1000).format(
                            "YYYY-MM-DD HH:mm:ss"
                        );
                        this.data.push({
                            buyerAddress: item.buyerAddress,
                            buyerName: item.buyerName,
                            buyerOpenid: item.buyerOpenid,
                            buyerPhone: item.buyerPhone,
                            createTime: item.createTime,
                            orderAmount: item.orderAmount,
                            orderId: item.orderId,
                            orderStatus: item.orderStatus,
                            payStatus: item.payStatus,
                            updateTime: item.updateTime,
                        });
                    });

                    console.log(this.data);
                }
            );
        },
        initSrcoll() {
            this.listBScroll = new BScroll(this.$refs.wrapper, {
                click: true,
                scrollY: true,
                probeType: 3,
                pullUpLoad: {
                    threshold: -70, // 当上拉距离超过50px时触发 pullingUp 事件
                },
            });
            this.listBScroll.on("pullingUp", () => {
                this.getList();
                this.listBScroll.finishPullUp();
                setTimeout(() => {
                    this.listBScroll.refresh();
                }, 500);
            });
        },
    },
    watch: {
        data() {
            this.$nextTick(() => {
                this.initSrcoll();
                this.listBScroll.refresh();
            });
        },
    },
    mounted() {},
    created() {
        let data = {
            openid: this.openid,
            page: this.page,
            size: this.size,
        };
        http.get("/tophappiness/sell/buyer/order/list", data).then((res) => {
            console.log(res);
            res.data.forEach((item) => {
                item.createTime = moment(item.createTime * 1000).format(
                    "YYYY-MM-DD HH:mm:ss"
                );
            });
            this.data = res.data;
        });
    },
};
</script>
<style lang="less" scoped>
.myorder {
    .header {
        width: 100%;
        position: fixed;
        top: 0;
        background: #fff;
        z-index: 2;

    }
    .order {
        padding: 0 20px;
        margin-top: 60px;
        padding-bottom: 70px;
        height: calc(100vh - 130px);
        overflow: hidden;
        .order-container {
            padding: 20px 0;
            .order-list {
                padding: 10px;
                background: #fff;
                box-shadow: 0 0 6px 2px #eee;
                border-radius: 10px;
                margin-bottom: 20px;

                .order-item {
                    position: relative;
                    .order-item-table {
                        font-size: 18px;
                        color: #000;
                        padding: 10px 0;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        span {
                            font-size: 14px;
                            color: #ccc;
                        }
                    }
                    .order-item-food {
                        padding: 20px 10px;
                        background: #f9f9f9;
                        border-radius: 10px;
                        .order-item-food-item {
                            font-size: 18px;
                            color: #000;
                            margin-bottom: 5px;
                            &:last-child {
                                margin-bottom: 0;
                            }
                        }
                    }
                    .order-item-info {
                        display: flex;
                        justify-content: space-between;
                        align-items: flex-end;
                        padding: 20px 0 10px;
                        .order-item-info-count {
                            font-size: 14px;
                            color: #ccc;
                            span {
                                font-size: 22px;
                                color: #000;
                                font-weight: bold;
                            }
                        }
                    }
                    .payStatus {
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        transform: translate(-50%, -50%);
                        padding: 0 5px;
                        font-size: 16px;
                        color: red;
                        transform: rotate(25deg);
                        border: 1px solid red;
                    }
                    .success {
                        color: #07c160;
                        border: 1px solid #07c160;
                    }
                }
            }
        }
    }
}
</style>
